import { FC,useCallback,useMemo ,useState} from "react";
const UseMemo:FC<any>=()=>{
    let [count,setCount]=useState<number>(1)
    let [flag,setFlag]=useState<boolean>(false)
    let handleClick1=()=>{
        setCount(count+1)
    }
    let handleClick2=()=>{
        setFlag(!flag)
    }

    // useNemo可以根据第二个依赖参数来决定是否要重新执行,依赖不变化的时候会缓存结果
    // 计算属性useMemo返回的是结果，缓存的是结果(值)
    let num=useMemo<number>(()=>{
        console.log(count);
        return count + 20
    },[count])

    // useCallBack 缓存的是函数
    let cb=useCallback(()=>{
        console.log(flag+'');
        return flag +''
    },[flag])
    // console.log(cb);
    cb()

    return(
        <fieldset>
            <legend>计算属性useMemo</legend>
            <h3>{count}</h3>
            <h3>num:{num}</h3>
            <h3>cb:{cb()}</h3>
            <button onClick={handleClick1}>点击变更count</button>
            <button onClick={handleClick2}>点击变更flag</button>
        </fieldset>
    )
}

export default UseMemo